<template>
  <el-aside :width="isCollapse ? '64px' : '200px'">
  <!-- 侧边栏菜单区域 -->
  <el-menu background-color="#00192E"
           text-color="#fff" active-text-color="#499EFF" :unique-opened="true"
           :collapse="isCollapse" :collapse-transition="false" :router="true"
           :default-active="activePath">
    <div class="toggle-button" @click="toggleClick">|||</div>
    <!-- 一级菜单 -->
    <el-submenu :index="item.id + ''" v-for="item in CCMenuList" :key="item.id">
      <!-- 一级菜单的模板区域 -->
      <template slot="title">
        <!-- 图标 -->
        <i :class="iconsObj[item.id]"></i>
        <!-- 文本 -->
        <span>{{item.authName}}</span>
      </template>
      <!-- 二级菜单　-->
      <el-menu-item :index="'/' + subItem.path + ''" v-for="subItem in item.children"
                    :key="subItem.id" @click="saveNavState('/' + subItem.path + '')">
        <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-menu"></i>
          <!-- 文本 -->
          <span>{{subItem.authName}}</span>
        </template>
      </el-menu-item>

    </el-submenu>
  </el-menu>
  </el-aside>
</template>

<script>
  export default {
    name: "HomeItemAside",
    data() {
      return {
        // 设置小图标
        iconsObj: {
          '125': 'iconfont icon-user',
          '103': 'iconfont icon-tijikongjian',
          '101': 'iconfont icon-shangpin',
          '102': 'iconfont icon-danju',
          '145': 'iconfont icon-baobiao'
        },
        // 是否折叠
        isCollapse: false,
        activePath: ''
      }
    },
    created() {
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    props: {
      // 接收HomeItemAside传过来的数据
      CCMenuList: {
        type: Array,
        default() {
          return[]
        }
      }
    },
    methods: {
      // 点击鼠标，切换菜单的折叠与展开
      toggleClick() {
        this.isCollapse = !this.isCollapse
      },
      // 保存链接激活状态
      saveNavState(activePath) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath = activePath
      }
    }
  }
</script>

<style scoped>
  .el-aside {
    background-color: #00192E;
  }
 .el-menu {
   border-right: none;
 }
  .iconfont {
    margin-right: 10px;
  }
 .toggle-button {
   background-color: #00192E;
   font-size: 10px;
   line-height: 24px;
   color: #fff;
   text-align: center;
   letter-spacing: 0.2em;
   /* 鼠标经过变成小手的图标 */
   cursor: pointer;
 }
 </style>